<template>
  <view class="layout">
    <view class="content">
      <router-view v-slot="{ Component, route }">
        <transition :name="(route.meta as any)?.transition ?? ''">
          <keep-alive :include="keepAliveRoutes">
            <component class="layout-component" :is="Component"></component>
          </keep-alive>
        </transition>
      </router-view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
import { useTitle } from "@/hooks";
import APP_CONFIG from "@/core/config";
defineOptions({ name: "layout" });
useTitle();
const { openTabbar } = APP_CONFIG;
const needKeepAliveRoutes = ref<Array<string>>([]);
const keepAliveRoutes = computed(() => {
  return [...(openTabbar ? ["tabbar"] : []), ...needKeepAliveRoutes.value];
});
window.addEventListener("message", (e: { data: { routeStack: Array<string> } }) => {
  const { routeStack = [] } = e.data;
  needKeepAliveRoutes.value = [...routeStack];
});
</script>

<style lang="less" scoped>
.layout {
  box-sizing: border-box;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;

  .content {
    height: 100%;
    overflow: hidden;
    position: relative;
  }

  .layout-component {
    position: absolute;
    z-index: 15;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--van-page-back);
    transition: transform 0.45s ease-in-out;
  }

  .slide-in-enter-active {
    transform: translate(100%, 0);
    box-shadow: -5px 0 10px #cecece63;
  }

  .slide-in-enter-to {
    transform: translate(0, 0);
  }

  .slide-out-leave-active {
    z-index: 50;
    transform: translate(0, 0);
    box-shadow: -5px 0 10px #cecece63;
  }

  .slide-out-leave-to {
    transform: translate(100%, 0);
  }
}
</style>
